<script setup>
import {defineProps, defineEmits, watch} from 'vue';
import router from '@/router/index.js';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {addMessage, addMMssage} from '@/api/getData.js';
import axios from "axios";
const props = defineProps({
  isModalOpen: Boolean
});

const { emit } = defineEmits(['close']);

const closeModal = () => {
  emit('close');
// 可选：根据需要进行路由导航
  router.push('/messages'); // 例如导航到根路径
}
watch(() => props.isModalOpen, (newValue) => {
  if (!newValue) {
    closeModal();
  }
});
const form = ref({
  senderId:'',
  receiverId: '',
  content: '',
  messageType: '',
  createdAt: '',
});

const isModalOpen = ref(false);

function submitForm() {


  try {
    form.value.sendId = parseInt(form.value.senderId);
    form.value.receiverId = parseInt(form.value.receiverId);
    console.log(typeof form.value.senderId);
    console.log(form.value);
     addMMssage(form.value).then(res => {
          console.log('Response:', res.datas);
          // 处理响应
          router.push('/messages');

        })

  } catch (error) {
    console.error('消息处理出错', error);
  }
}


</script>



<template>
  <div class="modal" :class={active:isModalOpen}>
    <div class="container">
      <div class="header" style="width: 100% ;color: black">
          wtf
      </div>
      <div class="form-section">
<!--        <div class="form-row">-->
<!--          <label for="messageId">Message Id</label>-->
<!--          <textarea id="messageId" v-model="form.messageId" style="height: 25px"></textarea>-->
<!--        </div>-->
        <div class="form-row">
          <label for="sendererId">sendId</label>
          <input type="text" id="senderId" v-model="form.senderId">
          <label for="receiverId">receiverId</label>
          <input type="text" id="receiverId" v-model="form.receiverId">
        </div>
        <div class="form-row">
          <label for="createdAt">createdAt</label>
          <input type="text" id="createdAt" v-model="form.createdAt">
          <label for="messageType">Type</label>
          <input type="text" id="messageType" v-model="form.messageType">
        </div>
        <div class="form-row">
          <label for="content">Concent</label>
          <textarea id="content" rows="10" v-model="form.content"></textarea>
        </div>
        <div class="form-row">
          <label>Visibility</label>

          <label for="secrecy"><img src="@/assets/Message/write/secrecy.gif" width="31" height="19" alt="Secrecy"></label>

          <label for="open"><img src="@/assets/Message/write/open.gif" width="33" height="19" alt="Open"></label>
        </div>
        <div class="submit-row">
          <button @click="submitForm">send</button>
        </div>
      </div>

    </div>
  </div>

</template>



<style>
.container {
  width: 50%;
  height: 50%;
  margin: 0 auto;

}

.header {
  text-align: center;
}

.form-section {
  margin-top: 20px;
  border: 1px solid #ccc;
  padding: 20px;
}

.form-row {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.submit-row {
  margin-top: 20px;
  text-align: center;
}

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: 1000; /* 确保模态框位于其他内容之上 */

}

.modal.active {
  display: block;
}

.modal-content {
  width: 100%; /* 模态框宽度为屏幕宽度的一半 */
  max-width: 1200px; /* 最大宽度，可根据需要调整 */
  background-color: #fff; /* 白色背景 */
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 阴影效果 */
}

.modal-content button {
  margin-top: 10px;
}
</style>
